<template>
  <div class="home-form">
    <i-form :rules="homeRule" ref="info" :model="info" autocomplete="on" @submit.native.prevent>
      <FormItem prop="user">
        <i-input
          v-model="info.user"
          type="number"
          placeholder="请输入学号或准考证号"
          size="large"
          :readonly="readonlyInput"
          clearable
          class="home-input"
          on-change="test(w)"
          :maxlength="max"
          autocomplete="on"
        >
          <span slot="prepend">证件号</span>
        </i-input>
      </FormItem>
    </i-form>

    <i-button type="primary" class="home-btn" size="large" :loading="loading" @click="subInfo">
      <span v-if="!loading">查 询</span>
      <span v-else>查询中</span>
    </i-button>

    <div class="home-mascot">
      <img src="../assets/mascot.png" alt="青春在线吉祥物" class />
    </div>
  </div>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      info: {
        user: ""
      },
      inputIcon: "",
      loading: false,
      readonlyInput: false,
      max: 3,
      homeRule: {
        user: [
          {
            required: true,
            message: "证件号码不能为空！"
          }
        ]
      }
    };
  },
  methods: {
    // 显示查询状态（禁用输入框和按钮）
    onChangeLoading: function() {
      if (!this.loading) {
        this.readonlyInput = true;
        this.loading = true;
      } else {
        this.readonlyInput = false;
        this.loading = false;
      }
    },

    // 错误弹窗（请求数据失败时调用）
    showErr: function(type) {
      switch (type) {
        case "service":
          this.$Message.error("抱歉！服务器出现错误！");
          break;
        case "empty":
          this.$Message.error("证件号码不能为空！");
          break;
        default:
          break;
      }
    },

    // 表单验证
    checkInfo: function() {
      if (this.info.user === "") {
        this.showErr("empty");
      } else {
        return 1;
      }
    },

    // 提交数据
    subInfo: function() {
      if (this.checkInfo()) {
        // 改变表单禁用状态
        this.onChangeLoading();
        // 请求
        this.$axios
          .get("https://youthapi.sdut.edu.cn/api/newstudent", {
            params: {
              num: this.info.user
            }
          })
          .then(res => {
            if (res.status === 200) {
              let data = JSON.stringify(res.data);
              localStorage.setItem("fresh-data", data);
              this.$router.replace("/result");
              return;
            }
            this.showErr("service");
            this.onChangeLoading();
          })
          .catch(err => {
            if (err.response && err.response.status === 404) {
              this.$Message.error(err.response.data.message);
            } else {
              this.showErr("service");
            }
            this.onChangeLoading();
          });
      }
    }
  },

  created() {
    const localData = localStorage.getItem("fresh-data");
    if (localData) {
      this.$router.replace("/result");
    }
  }
};
</script>

<style scoped>
.home-form {
  max-width: 450px;
  margin: 0 auto;
  margin-top: 60px;
  padding: 0 20px;
}
.home-btn {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
  width: 120px;
}
.home-mascot {
  width: 100%;
  max-width: 400px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
}
.home-mascot img {
  width: 100%;
}
</style>